<script lang='ts'>
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";

@Component 
class LineComponent extends Vue {

  @Prop() readonly from: Array<number>
  @Prop() readonly to: Array<number>

  get path() {
    return ():string => this.createCPath(this.from[0], this.from[1], this.to[0], this.to[1])
  }

  createCPath(x1, y1, x2, y2) {
    let path = "M" + x1 + " " + y1 + " ";
    let cy1 = (y1 + y2) / 2;
    let cy2 = (y1 + y2) / 2;
    let c = "C" + x1 + " " + cy1 + "," + x2 + " " + cy2 + ",";
    path = path + c + x2 + " " + y2;
    return path;
  }
}
export default LineComponent;
</script>

<template>
  <g v-if="from && to && from.length > 0 && to.length > 0">

    <defs>
      <marker id="Triangle" viewBox="0 0 20 20" refX="20" refY="10"
          markerWidth="10" markerHeight="10" orient="auto">
        <path d="M 0 0 L 20 10 L 0 20 z" />
      </marker>
    </defs>

    <path
      class="line-path"
      :d="path()"
      stroke="gray"
      fill='none'
      ref='path'
      marker-end="url(#Triangle)"
    />
  </g>
</template>

<style lang='scss' scoped>

</style>
